<template>
    <!-- 视频监控-监控列表 -->
    <div class="main_content">
        <div class="filter">
            <div class="left_logo" >
                <img src="../../assets/images/fvs/common/fvs_fz.png" />
                <span>分组筛选</span>
            </div>
            <div class="input">
                <Input
                    placeholder="请输入分组名称"
                    search
                    enter-button
                    clearable
                    v-model="groupName"
                    @on-search="searchGroupFn"
                    @on-change="searchGroupChangeFn"
                    @on-clear="searchGroupClearFn"
                >
                    <Icon type="ios-search" slot="suffix"/>
                </Input>
            </div>
            <div class="scorll">
                <el-tree
                    :default-expand-all="true"
                    :data="treeList"
                    ref="treeBox"
                    node-key="id"
                    :render-content="renderContent"
                    :expand-on-click-node="false"
                    :highlight-current="true"
                    :filter-node-method="filterNode"
                ></el-tree>
            </div>
        </div>
        <div class="content">
            <div class="header">
                <div class="list">
                    <Select v-model="deviceStatus" style="width: 200px" placeholder="请选择在线状态" filter-by-label >
                        <Option v-for="item in deviceTypeList" :value="item.id" :key="item.id" >{{ item.name }}</Option>
                    </Select>
                </div>
                <div class="list">
                    <Select v-model="webcamType" style="width: 200px" placeholder="请选择摄像头类型" filter-by-label >
                        <Option v-for="item in webcamTypeList" :value="item.id" :key="item.id" >{{ item.name }}</Option>
                    </Select>
                </div>
                <div class="list">
                    <div class="item">
                        <Input style="width: 200px" placeholder="请输入设备名称" clearable v-model="keyword"></Input>
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>
                </div>
                <input type="text" class="intBox" style="display: none" />
                <div class="list" @click="onSerch">
                    <Button type="primary">搜索</Button>
                </div>
                <div class="list" @click="onReset">
                    <Button>重置</Button>
                </div>
            </div>
            <div class="box">
                <div class="checkBox">
                    <ul class="check" v-if="list.length > 0">
                        <li
                            v-for="(item, index) in list"
                            :key="item.id"
                            @click="getDetails(item, index)"
                            v-preventReClick="1500"
                            v-bind:style="{backgroundImage: 'url(' + item.snapshotUrl + ')'}"
                        >
                            <div class="check_tag">
                                <div class="item">
                                    <span class="per">{{ item.name }}</span>
                                    <p>
                                        <em v-if="item.deviceStatus == 0" style="background-color: #FF4848;" ></em>
                                        <span v-if="item.deviceStatus == 0" style="color: #FF4848" >离线</span>
                                        <em v-if="item.deviceStatus == 1" style="background-color: #3FCF77;" ></em>
                                        <span v-if="item.deviceStatus == 1" style="color: #3FCF77" >在线</span>
                                    </p>
                                </div>
                                <div class="item">
                                    <p style="width: 57%">
                                        <span class="per">{{ item.deptName }}</span>
                                    </p>
                                    <div class="line">
                                        <el-button
                                            @click.stop="getDetails(item, index)"
                                            style="padding: 0.06rem 0.14rem;border-radius: 0.15rem;background: #1891ff;border: 1px solid #1891ff;"
                                            type="info"
                                            size="mini">
                                            <span style="color: #fff;font-size: 0.12rem;" class="text">直播</span>
                                        </el-button>
                                        <el-button
                                            @click.stop="getRecordList(item, index)"
                                            style="padding: 0.06rem 0.14rem;border-radius: 0.15rem;background: #1891ff;border: 1px solid #1891ff;"
                                            size="mini"
                                            v-preventReClick="1500">
                                            <span style="color: #fff;font-size: 0.12rem;" class="text">回放</span>
                                        </el-button>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div class="no_lsit" v-else>
                        <div class="no_lsit" style="width: 96%;margin: auto;text-align: center;">
                            <img src="./../../assets/images/common/rotary_nodata.png" style="height: 506px" />
                        </div>
                    </div>
                    <div class="clearfix"   style="border-top: 1px solid #eee" >
                        <div class="float-right" style="margin-top: 0.2rem; text-align: center" >
                            <Page
                                v-if="totalCount"
                                :current.sync="current"
                                :total="totalCount"
                                :page-size="pageSize"
                                show-elevator
                                show-total
                                @on-change="pageChange"
                            ></Page>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <Modal v-model="videomodal" :mask-closable="false" width="950px" :footer-hide="true" class-name="msgModal" >
            <div id="videoIdElement" v-if="LiveReplay == 'Live'" style="display: flex; align-items: center; justify-content: center;">
                <iframe id="yushiHtmlId" v-if="videomodal == true" :src="'/static/yushi_html/index.html?snCode='+
                    snCode+
                    '&width='+ onInnerBox('width') +
                    '&height='+ onInnerBox('height') +
                    '&rectX='+ onInnerBox('x') +
                    '&rectY='+ onInnerBox('y')"
                    width="950px"  height="660px"  frameborder="0">
                </iframe>
            </div>
            <div v-if="LiveReplay == 'Replay'">
                <div slot="header" style="display: flex;justify-content: space-between;font-size: 14px;align-items: center;font-weight: 700;" >
                    <span v-if="!isAdd" style="color: #fff">视频直播</span>
                    <span v-if="isAdd" style="color: #fff">视频回放</span>
                    <span style="cursor: pointer" @click="flv_close" >
                        <Icon type="ios-close-circle" size="20" style="color: #fff" />
                    </span>
                </div>
                <div style="width: 942px; margin: 0 auto; margin-bottom: 20px" v-if="isAdd" >
                    <DatePicker
                        type="date"
                        placeholder="请选择日期"
                        style="width: 200px"
                        format="yyyy-MM-dd"
                        @on-change="getTime"
                        v-model="time"
                        :options="options"
                        :clearable="false"
                    ></DatePicker>
                    <Select v-model="tiemType" style="width: 150px" placeholder="请选择时间范围" @on-change="getRecordTime">
                        <Option v-for="(item, index) in recordList" :value="index" :key="index" >{{ item.time }}</Option>
                    </Select>
                </div>

                <div ref="videoElement2" id="videoElement2" v-show="videoFlag" style="width: 942px;height: 600px;overflow: hidden;margin: 0 auto;"></div>
                <div class="chart" v-show="!videoFlag">
                    <video
                        ref="videoElement"
                        id="videoElement"
                        controls
                        autoplay
                        muted
                        width="942"
                        height="600"
                        style="object-fit: fill; outline: none"
                    ></video>
                    <div class="operationBtn" v-show="!operationFlag" @click="operationFlag = true" ></div>
                    <div class="operationBox" v-show="operationFlag">
                        <div class="closeBtn">
                            <Icon style="cursor: pointer" type="ios-arrow-forward" @click="operationFlag = false" />
                        </div>
                        <div class="operation">
                            <div @click="operationBtn(0)" class="btn operationTop">
                                <Icon type="ios-arrow-up" />
                            </div>
                            <div @click="operationBtn(3)" class="btn operationRight" >
                                <Icon type="ios-arrow-forward" />
                            </div>
                            <div @click="operationBtn(2)" class="btn operationLeft">
                                <Icon type="ios-arrow-back" />
                            </div>
                            <div @click="operationBtn(1)" class="btn operationBottom" >
                                <Icon type="ios-arrow-down" />
                            </div>
                            <div class="circle"></div>
                        </div>
                        <div class="focusBtn">
                            <div class="p">
                                <div class="jia" @click="operationBtn(11)"></div>
                                <div class="text">调焦</div>
                                <div class="jian" @click="operationBtn(10)"></div>
                            </div>
                            <div class="p">
                                <div class="jia" @click="operationBtn(8)"></div>
                                <div class="text">聚焦</div>
                                <div class="jian" @click="operationBtn(9)"></div>
                            </div>
                        </div>
                        <div class="clarity" v-show="allUrl.hls && allUrl.hlsHd">
                            <Select v-model="clarityType" style="width: 80px" @on-change="selectClarityChangeFn" >
                                <Option v-for="item in clarityList" :value="item.id" :key="item.id" >{{ item.name }}</Option>
                            </Select>
                        </div>
                    </div>
                </div>
            </div>

        </Modal>
    </div>
</template>
<script>
import hlsjs from "hls.js";
import {
    getFvsList,
    getAlldeptList,
    getStreamUrl,
    getRecord,
    getFvsToken,
    getGroupTreeList,
    getTypeList,
    getEmpRecordList,
} from "@/api/api.js";
import { getFvsDevicePTZ } from "@/api/fvs.js";
import EZUIKit from "ezuikit-js";
import {
    H265,
    HaiKang_platform,
    HaiKangGB_platform,
    Hls,
    Hls_streamMode,
} from "../global-const";

export default {
    data() {
        return {
            //云台操作节流阀
            operationFlag: false,
            //云台操作节流阀
            ptzFlag: false,
            //设备id
            deviceId: "",
            //播放地址
            allUrl: {},
            snCode: '',
            clarityType: 1,
            clarityList: [
                {
                    id: 1,
                    name: "高清",
                },
                {
                    id: 2,
                    name: "标清",
                },
            ],
            options: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
            },
            pageNum: 1,
            pageSize: 12,
            current: 1,
            totalCount: "",
            keyword: "",
            list: [],
            deptID: "",
            videomodal: false,
            src: "",
            video: "",
            poster: "",
            myVideo: "",
            time: new Date(),
            recordList: [],
            tiemType: "",
            pause: false,
            flag: false,
            deptId: "",
            url: [],
            player: "",
            bgimgList: [
                require("./../../assets/images/fvs/common/record0.png"),
            ],
            platform: "",
            recordPlay: "",
            recordId: "",
            ezvizToken: "",
            count: "",
            isAdd: false,
            htmlVideo: "",
            // isCollapse: false,
            groupId: "",
            groupName: "",
            deviceStatus: -1,
            webcamType: -1,
            treeList: [],
            deviceTypeList: [
                {
                    id: -1,
                    name: "全部",
                },
                {
                    id: 0,
                    name: "离线",
                },
                {
                    id: 1,
                    name: "在线",
                },
            ],
            webcamTypeList: [],
            videoFlag: true,
            TokenFlag: false,
            // EZUIKit对象
            EZUIKitObj: null,

            LiveReplay: 'Live'

        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        },
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.pageNum = 1;
                this.current = 1;
                this.deviceStatus = -1;
                this.webcamType = -1;
                this.keyword = "";
                this.groupName = "";
                this.getGroupTreeListFn();
                this.getTypeListFn();
            }
        },
        videomodal(val) {
            if (!val) {
                this.$refs.videoElement.setAttribute("src", "");
                if (this.hlsjs) {
                    this.$refs.videoElement.pause();
                    this.hlsjs.destroy();
                    this.hlsjs = null;
                }
            }
        },
    },
    methods: {
        onInnerBox(e) {
            let innerRect = '';
            // let innerBoxDiv = document.getElementById('videoIdElement');
            // setTimeout(() => {
                // const innerBoxDiv = this.$refs["videoElement" + index];
                const innerBoxDiv = document.getElementById("videoIdElement");
                console.log('innerBoxDiv', innerBoxDiv);
                // 获取元素相对于视口的位置
                if (innerBoxDiv) {
                  const rect = innerBoxDiv.getBoundingClientRect();
                  console.log('rect--rect', rect);
                  if(e == 'x') {
                      innerRect = rect.x;
                  } else if(e == 'y') {
                      innerRect = rect.y;
                  } else if(e == 'width') {
                      innerRect = (rect.width-40)+'px';
                  } else if(e == 'height') {
                      innerRect = (rect.height-40)+'px';
                  } else {
                      innerRect = 0
                  }
                }
                console.log('innerRect', innerRect);
                return innerRect
            // }, 100);
        },

        //播放实时监控-EZUIKit
        playEZUIKitVideo(url) {
            if (this.EZUIKitObj) {
                this.EZUIKitObj.stop();
                this.EZUIKitObj = null;
                this.$refs["videoElement2"].innerHTML = "";
            }
            let clientWidth = this.$refs["videoElement2"].clientWidth;
            let clientHeight = this.$refs["videoElement2"].clientHeight;
            this.EZUIKitObj = new EZUIKit.EZUIKitPlayer({
                id: "videoElement2",
                url,
                autoplay: true,
                accessToken: this.ezvizToken,
                decoderPath: "../../../static",
                width: clientWidth,
                height: clientHeight,
                audio: 0,
            });
            this.EZUIKitObj.play();
        },
        //萤石云摄像头操作
        operationBtn(type) {
            // if (this.ptzFlag == 0) {
            //     this.$Message.warning("此设备暂不支持云台控制功能");
            //     return
            // }
            let params = {
                deviceId: this.deviceId,
                ptzOption: type,
            };
            getFvsDevicePTZ(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                    } else {
                        //(解除注释一起删掉) this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //获取清晰度
        selectClarityChangeFn() {
            let url;
            if (this.clarityType == 1) {
                url = this.allUrl.hlsHd;
                console.log(url, 1);
            } else if (this.clarityType == 2) {
                url = this.allUrl.hls;
                console.log(url, 2);
            }
            this.showVideo(url);
        },
        // isCollapseFn() {
        //     this.isCollapse = !this.isCollapse;
        //     this.$store.commit("setIsCollapseFlag", this.isCollapse);
        // },
        // 获取摄像头类型
        getTypeListFn() {
            this.webcamTypeList = [];
            let params = {
                code: "webcam_type",
            };
            getTypeList(params)
                .then((res) => {
                    if (res.code == 200) {
                        let allObj = {
                            id: -1,
                            name: "全部",
                        };
                        this.webcamTypeList.push(allObj);
                        if (res.data.childList.length > 0) {
                            res.data.childList.forEach((v) => {
                                let obj = {
                                    id: v.id,
                                    name: v.name,
                                };
                                this.webcamTypeList.push(obj);
                            });
                        } else {
                            this.webcamTypeList = [];
                        }
                    } else {
                        //(解除注释一起删掉) this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        // 获取侧边栏分组列表
        getGroupTreeListFn() {
            let params = {
                deptId: this.deptId,
                keyword: this.groupName,
            };
            getGroupTreeList(params)
                .then((res) => {
                    if (res.code == 200) {
                        if (res.data.list.length > 0) {
                            let obj = {
                                title: "全部",
                                label: "全部",
                                id: 0,
                                num: 0,
                                children: [],
                            };
                            let list = res.data.list;
                            list.forEach((v) => {
                                if (v.groupName.length > 5) {
                                    v.groupName =
                                        v.groupName.substring(0, 5) + "...";
                                }
                                v["name"] = v.groupName;
                                v["label"] = v.groupName;
                                v["id"] = v.groupId;
                                v["num"] = v.deviceNum;
                                obj.num += v["num"];
                                obj.children.push(v);
                            });
                            this.treeList = [obj];
                            this.groupId = "";
                            this.getAllList();
                        } else {
                            this.treeList = [];
                        }
                    } else {
                        //(解除注释一起删掉) this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        searchGroupFn() {
            this.getGroupTreeListFn();
        },
        searchGroupChangeFn() {
            this.getGroupTreeListFn();
        },
        searchGroupClearFn() {
            this.getGroupTreeListFn();
        },
        getAllList() {
            let params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                keyword: this.keyword,
                deptId: this.deptId,
                groupId: this.groupId,
                deviceStatus: this.deviceStatus == -1 ? "" : this.deviceStatus,
                webcamType: this.webcamType == -1 ? "" : this.webcamType,
            };
            getFvsList(params)
                .then((res) => {
                    if (res.code == 200) {
                        let list = res.data.list;
                        list.forEach((v) => {
                            if (!v.snapshotUrl) {
                                v.snapshotUrl = this.bgimgList[0];
                            }
                            if (v.platform == 5) {
                                v.snapshotUrl = this.bgimgList[0];
                            }
                        });
                        this.list = list;
                        this.totalCount = res.data.total;
                    } else {
                        //(解除注释一起删掉) this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        onSerch() {
            this.pageNum = 1;
            this.current = 1;
            this.getAllList();
        },
        onReset(){
            this.deviceStatus = null
            this.webcamType = null
            this.keyword = null
            this.pageNum = 1;
            this.current = 1;
            this.getAllList();
        },
        // selectStateChangeFn(name) {
        //     this.pageNum = 1;
        //     this.current = 1;
        //     this.getAllList();
        // },
        // webcamTypeFn(name) {
        //     this.pageNum = 1;
        //     this.current = 1;
        //     this.getAllList();
        // },
        // keyworkFn() {
        //     this.pageNum = 1;
        //     this.current = 1;
        //     this.getAllList();
        // },
        // keyworkChangeFn() {
        //     this.pageNum = 1;
        //     this.current = 1;
        //     this.getAllList();
        // },
        // keyworkClearFn() {
        //     this.pageNum = 1;
        //     this.current = 1;
        //     this.getAllList();
        // },
        pageChange(index) {
            this.pageNum = index;
            this.getAllList();
        },
        getToken(platform, item) {
            let params = {
                deptId: this.deptId,
                platform: platform,
            };
            getFvsToken(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.ezvizToken = res.data.token;
                        if (this.TokenFlag) {
                            this.getDetailsUrl(item);
                        } else {
                            this.getRecordDetails();
                        }
                    } else {
                        //(解除注释一起删掉) this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        getDetailsUrl(item) {
            let params = {
                id: item.id,
            };
            getStreamUrl(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.videoFlag = false;
                        this.allUrl = res.data;
                        this.snCode = res.data.sn;
                        /* localStorage.setItem('ezopenUrl', this.ezopenUrl); */
                        let url;
                        /* if (item.playMode === H265) {
                            this.videoFlag = true;
                            url = res.data.ezopen;
                            this.playEZUIKitVideo(url);
                        } else {
                            this.videoFlag = false;

                            if (res.data.playUrl) {
                                url = res.data.playUrl;
                                this.$refs.videoElement.setAttribute(
                                    "src",
                                    url
                                );
                            } else {
                                if (item.streamMode == Hls_streamMode) {
                                    url = res.data.hls;
                                    this.clarityType = 2;
                                } else {
                                    url = res.data.hlsHd;
                                    this.clarityType = 1;
                                }
                                this.showVideo(url);
                            }
                        } */
                    } else {
                        //(解除注释一起删掉) this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        getDetails(item, index) {
            this.LiveReplay = 'Live';
            this.TokenFlag = true;
            this.poster = item.snapshotUrl;
            this.platform = item.platform;
            this.isAdd = false;
            if(item.deviceStatus == 1){
                this.videomodal = true;
            }
            this.ptzFlag = item.ptz;
            this.deviceId = item.id;
            if (item.playMode == H265 && (item.platform == HaiKang_platform || item.platform == HaiKangGB_platform)) {
                this.getToken(this.platform, item);
            } else {
                this.getDetailsUrl(item);
            }
        },
        //play for flv
        showVideo(url) {
            let video = this.$refs.videoElement; //定义挂载点
            if (hlsjs.isSupported()) {
                this.hlsjs = new hlsjs();
                this.hlsjs.loadSource(url);
                this.hlsjs.attachMedia(video);
                this.hlsjs.on(hlsjs.Events.MANIFEST_PARSED, () => {
                    this.video.play();
                });
                this.hlsjs.on(hlsjs.Events.ERROR, (event, data) => {
                    // console.log(event, data);
                    // 监听出错事件
                });
            } else if (
                this.$refs.videoElement.canPlayType(
                    "application/vnd.apple.mpegurl"
                )
            ) {
                this.$refs.videoElement.src = source;
                this.$refs.videoElement.addEventListener(
                    "loadedmetadata",
                    function () {
                        var _this = this;
                        _this.$refs.videoElement.play();
                    }
                );
            } else {
                this.$message.error("不支持的格式");
                return;
            }
        },
        cancelVideo() {
            if (this.hlsjs) {
                this.$refs.videoElement.pause();
                this.hlsjs.destroy();
                this.hlsjs = null;
            }
        },
        flv_close() {
            this.videomodal = false;
            if (!this.videoFlag) {
                this.$refs.videoElement.setAttribute("src", "");
                this.cancelVideo();
            } else if (this.videoFlag) {
                if (this.recordPlay == "" || this.recordPlay == undefined) {
                    return;
                } else {
                    this.recordPlay.stop();
                }
            }
        },
        getRecordTime(index) {
            if (index != undefined) {
                if (this.flag) {
                    this.recordPlay.stop();
                }
            } else {
                this.recordUrl = this.recordList[0].recordUrl;
                this.tiemType = this.recordList[0].time;
            }
            this.recordList.forEach((i, val) => {
                if (index == val) {
                    this.recordUrl = i.recordUrl;
                }
            });
            this.flag = true;
            this.playEZUIKitVideo(this.recordUrl);
        },
        getTime(index) {
            this.time = index;
            this.getRecordDetails();
        },
        getRecordList(item, index) {
            this.LiveReplay = 'Replay';
            this.TokenFlag = false;
            this.count = index;
            this.getToken(item.platform);
            this.time = new Date();
            this.recordId = item.id;
            this.getRecordDetails();
        },
        getRecordDetails() {
            this.isAdd = true;
            this.videomodal = true;
            this.videoFlag = true;
            if (this.flag) {
                this.recordPlay.stop();
            }
            let params = {
                id: this.recordId,
                date: this.time,
            };
            getRecord(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.recordList = res.data.list;
                        this.recordList.forEach((i, index) => {
                            i.endTime = i.endTime.substring(11, 20);
                            i.startTime = i.startTime.substring(11, 20);
                            i.time = i.startTime + "-" + i.endTime;
                            i.id = index;
                        });
                        if (this.recordList.length > 0) {
                            this.playEZUIKitVideo(this.recordList[0].recordUrl);
                            this.tiemType = this.recordList[0].id;
                        } else {
                            this.playEZUIKitVideo("");
                            this.tiemType = "";
                        }
                    } else {
                        //(解除注释一起删掉) this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        renderContent(h, { root, node, data }) {
            return (
                <span class="custom-tree-node">
                    <span
                        class="title"
                        on-click={() => this.getTreeId(data, node)}
                    >
                        {data.label}({data.num})
                    </span>
                </span>
            );
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        getTreeId(data, node, obj) {
            if (data.id == 0) {
                this.groupId = "";
            } else {
                this.groupId = data.id;
            }
            this.getAllList();
        },
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.getGroupTreeListFn();
        this.getTypeListFn();
        this.$store.commit("setIsCollapseFlag", false);
        /*监控手指双击事件全屏展示*/
        var obj = document.getElementById("videoElement");
        let i = 0;
        if(obj) {
            obj.addEventListener(
                "touchstart",
                function (event) {
                    i++;
                    setTimeout(function () {
                        i = 0;
                    }, 500);
                    if (i > 1) {
                        if (document.fullscreenElement) {
                            document.exitFullscreen();
                        } else {
                            document
                                .getElementById("videoElement")
                                .requestFullscreen();
                        }
                        i = 0;
                    }
                },
                false
            );
        }
    },
    beforeDestroy() {
        // if(this.hlsObj){
        //     this.$refs['videoElement'].pause();
        //     this.hlsObj.destroy();
        //     this.hlsObj = null;
        // }
        if (this.EZUIKitObj) {
            this.EZUIKitObj.stop();
            this.EZUIKitObj = null;
            this.$refs["videoElement"].innerHTML = "";
        }
    },
};
</script>

<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
</style>

<style lang="scss" scoped>
@import "./../../assets/style/fvs/msgModal.scss";

.operationBtn {
    position: absolute;
    bottom: 200px;
    right: 0px;
    z-index: 999;
    display: block;
    width: 120px;
    height: 120px;
    background-image: url("../../assets/images/fvs/console-control-icon.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
}

.operationBox {
    width: 212px;
    height: 252px;
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: -4px 1px 30px rgba(0, 0, 0, 0.12);
    opacity: 1;
    border-radius: 6px;
    position: absolute;
    bottom: 200px;
    right: 30px;
    z-index: 999;

    /deep/ .ivu-select-selection {
        background-color: rgba(255, 255, 255, 0.8);
    }

    .closeBtn {
        width: 212px;
        height: 32px;
        box-shadow: 0px 1px 5px rgba(38, 38, 38, 0.16);
        opacity: 1;
        border-radius: 6px 6px 0px 0px;
        font-size: 20px;
        padding-left: 20px;
        box-sizing: border-box;
    }

    .operation {
        position: relative;
        width: 72px;
        height: 72px;
        box-shadow: 0px 0px 9px 1px rgba(30, 30, 30, 0.14);
        border-radius: 50%;
        margin: 20px auto;

        .circle {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 20px;
            height: 20px;
            background: #fff;
            border-radius: 50%;
            border: 1px solid #eee;
            box-sizing: border-box;
        }

        .btn {
            font-size: 20px;
            color: #32585a !important;
            text-align: center;
            position: absolute;
            cursor: pointer;

            &.operationTop {
                top: 0;
                left: 50%;
                transform: translateX(-50%);
            }

            &.operationBottom {
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
            }

            &.operationLeft {
                top: 50%;
                left: 0;
                transform: translateY(-50%);
            }

            &.operationRight {
                top: 50%;
                right: 0;
                transform: translateY(-50%);
            }
        }
    }

    .focusBtn {
        width: 100%;
        padding: 10px 30px;
        box-sizing: border-box;

        .p {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 10px auto;

            .jian {
                width: 16px;
                height: 16px;
                background-image: url("../../assets/images/fvs/console-control-right.png");
                background-size: 100% 100%;
                background-repeat: no-repeat;
                cursor: pointer;
            }

            .jia {
                width: 16px;
                height: 16px;
                background-image: url("../../assets/images/fvs/console-control-left.png");
                background-size: 100% 100%;
                background-repeat: no-repeat;
                cursor: pointer;
            }
        }
    }

    .clarity {
        position: absolute;
        bottom: 5px;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
    }
}

/deep/.main_content {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #f5f5f5;
    display: flex;
    .filter {
        position: relative;
        height: 100%;
        overflow: hidden;
        background: #fff;
        .left_logo{
            display: flex;
            align-content: center;
            justify-content: center;
            margin-top:20px;
            font-size:20px;
            img{
                height:30px;
                margin-right: 10px;
            }
        }
        .input {
            width: 90%;
            margin: 15px auto;
            height: 32px;
            .ivu-input {
                width: 100%;
                height: 32px;
            }
            .ivu-input-search {
                border-radius: 0 16px 16px 0;
            }
        }
        .el-menu {
            border-right: none;
            // background: linear-gradient(18deg, #071020 0%, #0C1B50 100%);
            background-color: transparent;
        }
        .el-menu-vertical-demo {
            height: 100%;
        }
        .el-menu-vertical-demo:not(.el-menu--collapse) {
            width: 200px;
            height: 100%;
            // background: linear-gradient(18deg, #071020 0%, #0C1B50 100%);
            background-color: transparent;
        }

        .el-tree {
            width: 90%;
            margin: 0 auto;
        }

        .is-focusable {
            background-color: transparent !important;
        }
    }
    .content {
        flex: 1;
        margin-left: 10px;
        height: 100%;
        box-sizing: border-box;
        .header {
            margin: auto;
            padding: 20px;
            margin-bottom: 10px;
            box-sizing: border-box;
            border-radius: 6px 6px 6px 6px;
            background-color: #fff;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .list {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-right: 30px;

                .item {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    height: 32px;
                    background-color: #EBF2F8;
                    box-sizing: border-box;
                    font-size: 12px;
                    color: #6d6d6d;
                    border-radius:20px;

                    // .ivu-input-icon-clear {
                    //     right: 30px;
                    // }

                    .ivu-input {
                        width: 100%;
                        height: 32px;
                    }

                    .ivu-input-search {
                        padding: 4px 10px !important;
                        border-radius: 0 20px 20px 0;
                    }
                }
            }
        }
        .box {
            width: 100%;
            background-color: #fff;
            height: calc(100% - 82px);

            .checkBox {
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                box-sizing: border-box;
                .check {
                    width: 100%;
                    padding: 20px;
                    flex: 1;
                    list-style: none;
                    // margin: 0 auto;
                    overflow: hidden;

                    li {
                        width: 24.2%;
                        height: 32%;
                        position: relative;
                        margin-right: 1%;
                        margin-bottom: 0.7%;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                        float: left;
                        cursor: pointer;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        &:nth-of-type(4n) {
                            margin-right: 0;
                        }

                        .check_tag {
                            width: 100%;
                            padding: 10px 20px;
                            position: absolute;
                            bottom: 0;
                            right: 0;
                            background: rgba(56, 56, 56, 0.3);
                            box-sizing: border-box;

                            .item {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                color: #b9c4c5;
                                font-size: 12px;
                                .per {
                                    color: #05f7ee;
                                    font-size: 12px;
                                }

                                em {
                                    width: 10px;
                                    height: 10px;
                                    display: inline-block;
                                    border-radius: 50%;
                                }
                            }
                        }
                    }

                    .fvs_img {
                        width: 640px;
                        height: 360px;
                        text-align: center;
                        line-height: 360px;
                        font-size: 28px;
                    }

                    li:nth-child(4n) {
                        margin-right: 0px !important;
                    }
                }
            }
        }
    }

    .scorll {
        width: 100%;
        overflow-y: auto;
        height: 100%;

        .custom-tree-node {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .title {
                width: 100%;
                font-size: 14px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }

    .scorll::-webkit-scrollbar {
        width: 6px;
    }

    /*滚动槽*/
    .scorll::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
    }

    /* 滚动条滑块 */
    .scorll::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
    }

    .scorll::-webkit-scrollbar-thumb:window-inactive {
        background: rgba(255, 0, 0, 0.4);
    }
}

.chart {
    width: 942px;
    height: 600px;
    margin: auto;
}

.video-js {
    width: 668px !important;
    height: 400px !important;
}

/deep/.ivu-input-group{
    border-radius:20px;
}
/deep/.ivu-input-group .ivu-input{
    border-radius: 20px 0 0 20px;
    border-color:#EBF2F8;
    background:#EBF2F8;
}
/deep/.ivu-input-group-append{
    border-radius: 0 20px 20px 0;
}
</style>
